@extends('admin.layout.lst')

@section('searchNav')

    <button type="button" id="btn1" class="layui-btn  layuiadmin-btn-record">添加最上级行</button>
    {{--<button type="button" id="btn2" class="layui-btn  layui-btn-primary">获取勾选数据</button>
    <button type="button" id="btn3" class="layui-btn  layui-btn-primary">获取全部数据</button>
    <button type="button" id="btn4" class="layui-btn  layui-btn-primary">关闭勾选节点</button>
    <button type="button" id="btn5" class="layui-btn  layui-btn-primary">展开勾选节点</button>
    <button type="button" id="btn6" class="layui-btn  layui-btn-primary">关闭所有子叶节点</button>
    <button type="button" id="btn7" class="layui-btn  layui-btn-primary">展开所有子叶节点</button>
    <button type="button" id="btn8" class="layui-btn  layui-btn-primary">获取表格树配置</button>
    <button type="button" id="btn9" class="layui-btn  layui-btn-primary">重载表格树</button>
    <button type="button" id="btn10" class="layui-btn  layui-btn-primary">删除选中行</button>--}}
    {{--    <table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>--}}

@endsection

@section('operationNav')

@show

@section('js')

    <script>
        lay.use(['table','layer',"tableTree"], function () {
            var table = layui.table
                ,$ = layui.$
                ,tableTree = layui.tableTree;

            function templet(d,field){
                if(!d[field])return '';
                if(typeof d[field] === 'string')return d[field];
                if(!Array.isArray(d[field]))return d[field].value ? d[field].value : '';
                var str = [];
                d[field].forEach(function (e) {str.push(e.value)});
                return str.join(' || ');
            }

            var urlAdd  = "{{url('guard/rbac/permission/add')}}";
            var urlDel  = "{{url('guard/rbac/permission/del')}}";
            var urlEdit = "{{url('guard/rbac/permission/edit')}}";
            var treeTable = tableTree.render({
                elem: '#LAY-record'
                ,id:'tableTree'
                ,url:'{{url()->current()}}'
                ,height: 'full-120'
                ,page: false
                ,treeConfig:{ //表格树所需配置
                    showField:'name' //表格树显示的字段
                    ,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
                    ,treepid:'pid'//父级id字段名称
                    ,iconClass:'layui-icon-triangle-r' //小图标class样式 窗口图标 layui-icon-layer
                }
                ,cols: [
                    [
                        {type:"checkbox"},
                        {field: 'id', title: 'ID', width:80},
                        {field: 'name', title: '名称', width:220},
                        {field: 'url', title: '链接', event:'url',config:{type:'input'}},
                        {field: 'sort', title: '排序', event:'sort',config:{type:'input'}}
                    ]
                ]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records //解析数据列表
                    };
                }
                ,text: {
                    none: '暂无相关数据' //默认：无数据。
                }
                /*,cols: [
                    [{type:'checkbox'}
                        ,{field:'name',title: 'name',width:259}
                        ,{field:'id',title:'id',width:120,sort:true}
                    ,{field:'danxuan',align:'center',event:'danxuan'
                        ,config:{type:'select',data:params}
                        ,title: '单选',width:120,templet:templet
                    }]
                ]*/
            });

            /**
             /**表格的增删改都会回调此方法
             * 与table.on(tool(lay-filter))用法一致。
             **/
            treeTable.on('tool(LAY-record)',function (obj) {
                var field = obj.field; //单元格字段
                var value = obj.value; //修改后的值
                var colInfo = obj.data; //当前行数据
                var event = obj.event; //当前单元格事件属性值
                if(event === 'add'){
                    layer.open({
                        type: 2
                        ,title: '添加权限'
                        ,content: urlAdd
                        ,maxmin: true
                        ,area: [w+'px', h+'px']
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            var iframeWindow = window['layui-layer-iframe'+ index]
                                ,submitID = 'LAY-submit'
                                ,submit = layero.find('iframe').contents().find('#'+ submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                                var field = data.field; //获取提交的字段
                                field['pid'] = colInfo.id;
                                $.post(urlAdd,field,function (res){
                                    if(res.status){
                                        Dialog.msgSuccessRight(res.msg);
                                        layer.close(index); //关闭弹层
                                        table.reload('tableTree'); //数据刷新
                                    }else{
                                        Dialog.msgErrorFalse(res.msg);
                                    }
                                },'json');
                            });
                            submit.trigger('click');
                        }
                    });
                }
                if(event === 'del'){
                    obj.del();
                    $.getJSON(urlDel+"?id="+colInfo.id,function (res){
                        if(res.status){
                            Dialog.msgSuccessRight(res.msg);
                        }else{
                            Dialog.msgErrorFalse(res.msg);
                            table.reload('treeTable');
                        }
                    })
                }
                if(event === 'edit' ){
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                    $.getJSON(urlEdit+"?id="+colInfo.id+"&name="+value,function (res){
                        if(!res.status){
                            Dialog.msgErrorFalse(res.msg);
                        }
                    })
                }
                if(event === 'url' ){
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                    $.getJSON(urlEdit+"?id="+colInfo.id+"&url="+value,function (res){
                        if(!res.status){
                            Dialog.msgErrorFalse(res.msg);
                        }
                    })
                }
                if(event === 'sort' ){
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                    $.getJSON(urlEdit+"?id="+colInfo.id+"&sort="+value,function (res){
                        if(!res.status){
                            Dialog.msgErrorFalse(res.msg);
                        }
                    })
                }

            });



            $('button').click(function () {
                var id = $(this).attr("id");
                if(id==="btn1"){
                    //data可以为空，为空则创建空行，否则按照data数据生成行

                    var info = {
                        '_token':'{{csrf_token()}}',
                        'name':'新建层级',
                        'level':1,
                        'pid':0
                    };

                    $.post(urlAdd,info,function (res){
                        var data = res.data.records
                        console.log(res.data.records);
                        //var data = {"id":13,"pid":1,"name":"张三13","danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""};
                        treeTable.addTopRow(data);//该方法生成的行是最上级的行
                    },'json');

                }else if(id === 'btn2') {
                    console.log(treeTable.getCheckedData()); //获取选中行数据
                }else if(id === 'btn3') {
                    console.log(treeTable.getTableTreeData()); //获取表格树所有数据
                }else if(id === 'btn4') {
                    treeTable.closeCheckedRows(); // 关闭选中行树节点
                }else if(id === 'btn5') {
                    treeTable.openCheckedRows(); // 展开选中行树节点
                }else if(id === 'btn6') {
                    treeTable.closeAllRows();  //关闭所有树节点
                }else if(id === 'btn7') {
                    treeTable.openAllRows(); //展开所有树节点
                }else if(id === 'btn8') {
                    console.log(treeTable.getTreeOptions()); //获取表格配置
                }else if(id === 'btn9'){
                    treeTable.reload(); //表格树进行reload
                }else {
                    treeTable.delCheckedRows(); //删除选中行
                }
            });
        });
    </script>


@endsection






